<template>
  <view class="sub-category-sheet">
    <CsActionSheet :show="show" @close="emit('close', null)">
      <CsBtnGrid :items="items" @click="categoryClick" />
    </CsActionSheet>
  </view>
</template>

<script lang="ts" setup>
import { CsGridItem } from '@/components/cs-btn-grid/cs-btn-grid.types'
import CsActionSheet from '@/components/cs-action-sheet/cs-action-sheet.vue'
import CsBtnGrid from '@/components/cs-btn-grid/cs-btn-grid.vue'

defineOptions({
  name: 'sub-category-sheet',
  options: {
    virtualHost: true,
    styleIsolation: 'shared',
  },
})

const props = defineProps<{ show: boolean; items: CsGridItem[] }>()

const show = toRef(props, 'show')
const items = toRef(props, 'items')

console.log('items', items)

const emit = defineEmits<{ close: [item?: CsGridItem] }>()

const categoryClick = (item: CsGridItem) => {
  emit('close', item)
}
</script>

<style lang="scss" scoped></style>
